<!DOCTYPE html>
<html lang="en" style="height: 100%">
<head>
  <meta charset="utf-8">

  <script src="data.js"></script>
  <script src="echarts.min.js"></script>
</head>
<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>

  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });

    let category = chartData.map(item => item.date);
    let lineData = chartData.map(item => item.temperature);

var option = {
      backgroundColor: '#0f375f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['折线图', '柱状图'], // 两者都要在图例中显示
        textStyle: {
          color: '#ccc'
        }
      },
      xAxis: {
        data: category,
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        },
        type: 'category' // 明确指定为类别轴
      },
      yAxis: {
        name: '温度 (°C)',
        splitLine: { show: false },
        axisLine: {
          lineStyle: {
            color: '#ccc'
          }
        }
      },
      series: [
        {
          name: '折线图',
          type: 'line',
          smooth: true,
          data: lineData
        },
        {
          name: '柱状图',
          type: 'bar',
          barWidth: '30%', // 设置柱状图的宽度
          data: lineData, // 使用与折线图相同的数据
          itemStyle: { // 设置柱状图的颜色
            color: '#73c0de' // 浅蓝色
          },
          selected: false
        }
      ]
    };

    // option


    myChart.setOption(option);
  </script>
</body>
</html>